<template>
	<view class="chat-page">
		<!-- 聊天区域 -->
		<!-- 聊天区域容器 -->
		<view class="chat-box">

			<view class="chat-item" v-for="(item,index) in chatList">
				<!-- 机器人 -->
				<view class="chat-list chat-message-left" v-if="item.type === 'left'">

					<!-- 头像 -->
					<u-avatar text="AI" fontSize="18" randomBgColor></u-avatar>
					<!-- 富文本解析 -->
					<view class="chat-content">
						<u-parse :content="item.msg"></u-parse>

					</view>


				</view>
				<!-- 另一个人 -->
				<view v-else class="chat-list chat-message-right">

					<!-- 富文本解析 -->
					<view class="chat-content">
						<u-parse :content="item.msg"></u-parse>
						<image :src="item.img" mode="" style="width: 120rpx; height: 120rpx;" v-if="show"></image>
					</view>
					<!-- 头像 -->
					<u-avatar text="我" fontSize="18" randomBgColor></u-avatar>

				</view>

			</view>
		</view>
		<view :class="{'bottom':showss==false,'active':showss==true}">
			<u--input placeholder="咨询" suffixIcon="chat" v-model="msg"></u--input>
			<uni-icons type="plus" size="30" @click="ondebiao()"></uni-icons>
			<button type="primary" @click="sendMessage">提交</button>
		</view>
		<view class="knbiao" v-if="showss">
			<image v-for="(item, index) in imgdata" :key="index" :src="item" mode="" @click="ondefa(item)"></image>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				showss: false,
				imgdata: [
					'http://img.qqtouxiangzq.com/gexing/xiaolian/xiaolian21.jpg',
					'http://pic.qqtn.com/up/2015-7/2015072416111819472.jpg',
					'http://pic.qqtn.com/up/2015-7/2015072416111976876.jpg'
				],
				msg: '',
				chatList: [{
					type: "left",
					msg: "亲，下拉课查看历史聊天消息哦，~若您需要资讯问题，建议您点击【订单】，选择需要咨询的【订单】"
				}],
				show: false
			}
		},
		onLoad() {

		},
		methods: {
			sendMessage() {
				if (this.msg == '') {
					uni.showToast({
						title: '内容不能为空',
						icon: "error"
					})
				} else {
					let _this = this
					console.log(this.msg);
					let msg = this.msg
					this.chatList.push({
						type: 'right',
						msg
					})
					this.chatList.push({
						type: "left",
						msg: "正在检索中"
					})
					uni.pageScrollTo({
						scrollTop: 9999999999999,
						duration: 500
					})
					let Index = this.chatList.length
					// 客户端调用云函数
					uniCloud.callFunction({
						name: "funtions-day1-2008A",
						data: {
							msg: msg
						},
						success(resData) {
							console.log("调用云函数成功啦", resData);
							let messageData = resData.result.data.Reply
							console.log(messageData);
							_this.chatList[Index - 1].msg = messageData
							// _this.chatList[Index - 1].loading = false
						},
						fail(error) {
							console.log("调用失败", error);
						}
					})
				}

			},
			ondebiao() {
				let _this = this
				_this.showss = !_this.showss

			},
			ondefa(item) {
				this.show = true
				let msg = this.msg
				this.chatList.push({
					type: 'right',
					img: item
				})
				this.chatList.push({
					type: "left",
					msg: "好像有点难，再说一遍可以么"
				})
				uni.pageScrollTo({
					scrollTop: 99999999,
					duration: 500
				})
			}
		}
	}
</script>

<style lang="scss">
	.chat-page {
		padding: 20rpx;

		.chat-item {
			margin-bottom: 80rpx;
		}

		.chat-list {
			display: flex;
			align-items: center;
			margin-top: 40rpx;
			margin-bottom: 40rpx;

			.chat-content {
				padding: 16rpx;
				border-radius: 20rpx;
				margin-left: 30rpx;
				background-color: green;
				color: white;
			}
		}

		.chat-message-right {
			display: flex;
			justify-content: flex-end;

			.chat-content {
				margin-right: 30rpx;
				background-color: goldenrod;
			}
		}

		.bottom {
			position: fixed;
			width: 100%;
			bottom: 0;
			right: 0;
			display: flex;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.active {
			position: fixed;
			width: 100%;
			bottom: 80rpx;
			right: 0;
			display: flex;
			padding: 20rpx;
			box-sizing: border-box;
			background-color: #fff;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
	}

	.knbiao {
		width: 100%;
		height: 50px;
		position: fixed;
		background-color: #fff;
		bottom: 0;
		left: 0;

		image {
			width: 50px;
			height: 50px;
		}

		display: flex;

	}
</style>